/********************************************************************************
 *@description: 充值提现统计
 *@author: Xhd
 *@API: 卢彦铮
 *@date: 2024-02-23 09:32:02
 *@version: V1.0.0
**********************************************************************************/

import React, { Component } from 'react';
import TheQueryForm from '@/components/TheQueryForm';
import TheTable from '@/components/TheTable';
import { apiRechargeWithdrawal } from "@/request/wallet/record";
import _ from "lodash";
import { getDateTime3 } from '@/utils/getDate';
import store from "@/store/store";

class Envelope extends Component {
  constructor(props) {
    super(props)
    this.queryFormRef = React.createRef();
    this.state = {
      columns1: [
        {
          title: "充值方式",
          dataIndex: "channel",
          key: "channel",
          render: (text) => {
            return "支付宝支付"
          }
        },
        {
          title: "充值金额",
          dataIndex: "rechargeMoney",
          key: "rechargeMoney",
          render: (text) => {
            return <React.$price price={text || 0} />
          }
        },
      ],
      dataSource1: [],
      columns2: [
        {
          title: "提现方式",
          dataIndex: "channel",
          key: "channel",
          render: (text) => {
            switch (text){
              case 'ALIPAY':
                return "支付宝提现"
              case 'BANK':
                return "银行卡提现"
            }
          }
        },
        {
          title: "实际到账金额",
          dataIndex: "passedWithdrawalMoney",
          key: "passedWithdrawalMoney",
          render: (text) => {
            return <React.$price price={text || 0} />
          }
        },
        {
          title: "提现到账金额（包含手续费）",
          dataIndex: "withdrawalMoney",
          key: "withdrawalMoney",
          render: (text) => {
            return <React.$price price={text || 0} />
          }
        },
      ],
      dataSource2: [],
      queryForm: {
        searchTime: ""
      },
      searchOption: [
        { field: 'time', label: '时间', placeholder: '请选择', required: false, rules: [], type: 'RangePicker' },
      ],
    }
  }
  componentDidMount() {
    this.getData()
  }
  getData = async (values) => {
    if (values && !_.isEmpty(values.time)) {
      values.searchTime = getDateTime3(values.time[0]) + ' 00:00:00' + '~' + getDateTime3(values.time[1]) + ' 23:59:59'
      delete (values.time)
    }
    this.setState(
      {
        queryForm: values === undefined ? this.state.queryForm : { ...values },
      },
      async () => {
        const params = { ...this.state.queryForm }
        store.dispatch({
          type: 'SaveSearchValues',
          data: { pathName: 'rechargeRecord', ...params }
        })
        console.log(params);
        let res = await apiRechargeWithdrawal({ ...params })
        if (res.code === 0) {
          this.setState({
            dataSource1: res.data.recharge,
            dataSource2: res.data.withdrawal,
          })
        }
      });
  };
  onReset = () => {
    this.setState({
      queryForm: { searchTime: "" },
    },
      () => {
        this.getData();
      }
    );
  }
  onFormSearch = (values) => {
    this.getData(values);

  }

  render() {
    const { columns1, dataSource1, columns2, dataSource2, searchOption, } = this.state;
    return (<div className='p-layout-box'>
      <TheQueryForm ref={(ref) => (this.queryFormRef = ref)} show={true} option={searchOption} onReset={() => this.onReset()} onGetValues={(values) => this.onFormSearch(values)} />
      <TheTable scroll={{ x: 'max-content', y: '63vh' }} columns={columns1} dataSource={dataSource1} />
      <div style={{ height: "50px" }}>

      </div>
      <TheTable scroll={{ x: 'max-content', y: '63vh' }} columns={columns2} dataSource={dataSource2} />
    </div>)
  }
}

export default Envelope
